<template>
    <div>
        <el-page-header @back="back" content="详情页面"></el-page-header>

        <div class="interspaceH"></div>

        <el-card class="sop_detail">
            <div>
                <h4 class="title" style="margin-top: 0;">规则名称</h4>
                <div class="grayText">{{ sopData.sopName }}</div>
            </div>

            <div>
                <h4 class="title">企业成员</h4>
                <div class="grayText">以下企业成员的新客户触发规则后，将在侧边栏显示该规则的快捷回复。</div>
                <el-tag v-for="tag in sopData.empList" :key="tag.empId" style="margin-right: 10px"> {{ tag.empName }}</el-tag>
            </div>

            <el-divider></el-divider>

            <div v-for="(item, index) in pushContentList" :key="index" style="margin-top: 20px">
                <div style="display:flex;justify-content: space-between">
                    <div class="content"><i class="el-icon-s-management"></i>{{ item.alertMessage }}</div>
                </div>
                <div v-if="item.alertTimeType == '1'" class="content" style="margin-top: 10px">客户添加企业员工后，{{ item.sendTimeField1 }} 小时 {{ item.sendTimeField2 }}
                    分钟后提醒发送（{{ item.alertMessage }}）
                </div>
                <div v-if="item.alertTimeType == '2'" class="content" style="margin-top: 10px">客户添加企业员工后，{{ item.sendTimeField3 }} 天 {{ item.sendTimeField4 }}
                    后提醒发送（{{ item.alertMessage }}）
                </div>
                <div>
                    <div style="border-radius: 5px; padding: 5px;margin-bottom: 10px;background-color: #FFFFFF"
                         v-for="(item1, index1) in item.contentList" :key="index1">
                        <img v-if="item1.imageUrl" :src="item1.imageUrl" class="avatar">
                        <div class="grayText" v-else>{{ item1.content }}</div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>

function formatDuring(millisecond) {
    let days = parseInt(millisecond / (1000 * 60 * 60 * 24));
    let hours = parseInt((millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = (millisecond % (1000 * 60)) / 1000;

    return {days, hours, minutes, seconds}
}

export default {
    name: "detail",
    props: {
        sopData: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            pushContentList: []
        }
    },
    watch: {
        sopData(n, o) {
            let pushMessage = JSON.parse(n.pushMessage)
            let messageList = []

            pushMessage.map((item) => {
                let data = {}
                let contentList = []

                data['alertMessage'] = item.alertMessage
                data['alertTimeType'] = item.alertTimeType

                let alertTime = formatDuring(item.alertTime)

                if (item.alertTimeType == '1') {
                    data['sendTimeField1'] = (alertTime.days * 24) + alertTime.hours
                    data['sendTimeField2'] = alertTime.minutes
                } else if (item.alertTimeType == '2') {
                    data['sendTimeField3'] = alertTime.days
                    data['sendTimeField4'] = (alertTime.hours.toString().length == 1 ? 0 + alertTime.hours.toString() : alertTime.hours) + ":" + (alertTime.minutes.toString().length == 1 ? 0 + alertTime.minutes.toString() : alertTime.minutes) + ":" + (alertTime.seconds.toString().length == 1 ? 0 + alertTime.seconds.toString() : alertTime.seconds)
                }

                item.pushMessage.map((item1) => {
                    if (item1.pushType == 1) {
                        contentList.push({
                            contentType: 1,
                            content: item1.pushMessage,
                            imageUrl: '',
                            linkContent: {
                                linkAddress: '',
                                linkTitle: '',
                                content: ''
                            }
                        })
                    } else if (item1.pushType == 2 || item1.pushMessage == 3) {
                        contentList.push({
                            contentType: item1.pushType,
                            content: "",
                            imageUrl: item1.pushMessage,
                            linkContent: {
                                linkAddress: '',
                                linkTitle: '',
                                content: ''
                            }
                        })
                    }
                })

                data['contentList'] = contentList

                messageList.push(data)
            })

            this.pushContentList = messageList
        }
    },
    methods: {
        back() {
            this.$emit("currentHandle", "list")
        },
    }
}
</script>

<style scoped>
.sop_detail .title {
    font-size: 14px;
    color: #505d69;
}
.sop_detail .grayText {
    font-size: 14px;
    color: #a7aeb4;
}

.sop_detail .content {
    font-size: 14px;
    color: #505d69;
}
</style>